<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/html-base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/public-train.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/signup.css"/>
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/newresize.js"></script>
    <!-- <script type="text/javascript" src="../../script/mui.min.js"></script> -->
    <style type="text/css">
    	.laydate-theme-xxx{width: 274px;}
    </style>
</head>
<body>
	<header class="header fix-header">
		<a class="backbtn" onclick="backClick();"></a>
		<h1 class="mui-title">订单</h1>
		<a class="icon-close" onclick="backClick();"></a>
	</header>
	<div class="signcontainer">
		<div class="signtopinfo">
			<h1><span id="class_name">货运代理师资培训班</span> <span class="price-txt" id="train_fee">￥12800.00</span></h1>
			<p><span>报到时间：</span><span id="apply_time">2018年12月14日</span>18:00前，若不能达到请提前告知</p>
			<p><span>培训时间：</span><span id="train_time">2018年12月15日-2018年12月17日</span></p>
			<p><span>培训地点：</span><span id="train_address">北京长风物流学院(北京市朝阳区十里堡八里庄东里6号院）</span></p>
		</div>
		<div class="signform">
			<form>
				<div class="signform-cont">
					<div class="signinfo-title">
						<span>请填写您的申请信息</span>
					</div>
					<div class="signsupportbox">
						<label>服务需求：</label>
						<div class="support-cont">
							<div class="support-cell active support-daixun show">代(带)训服务</div>
							<div class="support-cell ">技术支持服务</div>
						</div>
					</div>
					<div class="study-direction">
						<div class="direc-title">学习方向：</div>
						<ul id="course_list" class="direc-list">
							<!-- <li>
								<h3>物流（WMS）信息系统操作</h3>
								<div><span>-国际货代方向</span> <span class="direct-time">（18课时）</span></div>
							</li>
							<li>
								<h3>供应链建模与优化</h3>
								<div><span>-国际货代方向</span> <span class="direct-time">（18课时）</span></div>
							</li>
							<li>
								<h3>货代海运实物</h3>
								<div><span>-国际货代方向</span> <span class="direct-time">（18课时）</span></div>
							</li>
							<li>
								<h3>货代海运实物</h3>
								<div><span>-国际货代方向</span> <span class="direct-time">（18课时）</span></div>
							</li> -->
						</ul>
					</div>
					<ul class="signdatabox signdatabox2">
						<li class="item">
							<label class="item-label">院校名称</label>
							<input type="text" name="" id="apply_school" value="" class="item-input" placeholder="请输入所在院校"/>
						</li>
						<li class="item">
							<label class="item-label">专业名称</label>
							<input type="text" name="" id="apply_major" value="" class="item-input" placeholder="请输入专业"/>
						</li>
						<li class="item">
							<label class="item-label">负责人</label>
							<input type="text" name="" id="apply_name" value="" class="item-input" placeholder="请输入负责人"/>
						</li>
						<li class="item">
							<label class="item-label">联系电话</label>
							<input type="number" name="" id="apply_contact_phone" value="" class="item-input" placeholder="请输入联系电话"/>
						</li>
						<li class="item">
							<label class="item-label">实训人数</label>
							<input type="number" name="" id="spare7" value="" class="item-input" placeholder="请输入实训人数"/>
						</li>
						<li class="item">
							<label class="item-label">实训年级</label>
							<input type="text" name="" id="spare8" value="" class="item-input" placeholder="请输入实训年级"/>
						</li>
						<li class="item" style="border-bottom: 0;">
							<label class="item-label">实训开始时间</label>
							<input type="text" name="" id="spare3" value="" class="item-input input-time" placeholder="请选择开始时间" readonly=""/>
						</li>
                        <li class="item" style="border-bottom: 0;">
                            <label class="item-label">实训结束时间</label>
                            <input type="text" name="" id="spare4" value="" class="item-input input-time" placeholder="请选择结束时间" readonly=""/>
                        </li>
					</ul>
				</div>
				<div class="signform-cont">
					<div class="signinfo-title">
						<span>支付方式</span><span style="font-size: 0.36rem;color: #999;">（可以选择任意支付方式）</span>
					</div>
					<div class="signpaycont">
						<ul>
							<li class="item">
								<div class="payicon"><p><img src="../../image/payicon_zfb.png"/></p></div>
								<div class="paytxt">
									<label for="pay-zfb">支付宝支付</label>
									<input type="radio" name="pay" id="pay-zfb" value="2"  class="pay-radio"/>
								</div>
							</li>
							<li class="item">
								<div class="payicon"><p><img src="../../image/payicon_qb.png"/></p></div>
								<div class="paytxt" style="border-bottom: 0;">
									<label for="pay-qb">线下支付</label>
									<input type="radio" name="pay" id="pay-qb" value="1"  class="pay-radio"/>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="signform-cont">
					<div class="signinfo-title2">
						<span>报名后可在（学习）区查看</span>
					</div>
					<div class="signpaycont">
						<div class="sign-beizhutit">备注</div>
						<div class="sign-beizhutxt">
							<textarea name="" rows="" cols="" placeholder="如有其它需要，请留言给我们..."></textarea>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="confirmpay" onclick="commit()">确认支付</div>
</body>
<script type="text/javascript" src="../../script/laydate/laydate.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/timeStampTool.js"></script>
<script type="text/javascript" src="../../script/manager/promptManager.js"></script>
<script type="text/javascript">
	$(function(){
		$(".support-cont .support-cell").on("click",function(){
			$(".support-cont .support-cell").removeClass("active");
			$(this).addClass("active");
			if($(this).index() == 1){
				$(".support-cont .support-cell").eq(0).removeClass("show");
				$(".support-cont .support-cell").eq(0).parents(".signsupportbox").siblings(".study-direction").hide();
			}
		})
		$(".support-daixun").on("click",function(){
			$(this).toggleClass("show");
			$(this).parents(".signsupportbox").siblings(".study-direction").toggle();
		})
		$(".direc-list").on("click","li",function(){
			$(this).toggleClass("active");
		})
		//时间插件
        lay('.input-time').each(function(){
            laydate.render({
                elem: this,
                format: 'yyyy-MM-dd',
                trigger: 'click' ,
                theme: 'xxx',
                ready: function(date){
                    //插件初始化打开时调整显示的位置
                    $(".laydate-theme-xxx").css({"left":"50%","margin-left":"-137px"});
                },
                done: function(value, date, endDate){
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                }
            });
        });
	})
	apiready = function(){
		loadData();

	}
	function loadData() {
		cfnetppPOST(url_train_learningDirection,{},false,function (ret,status) {
			setupPageData(ret.data);
		});
	}
	function setupPageData(courseArr){
		if(courseArr!==undefined){
			for (var i = 0; i < courseArr.length; i++) {
				var courseData = courseArr[i];
				$('#course_list').append(courseCellHtml(courseData));
			}
		}
		var data = api.pageParam;
		$('#train_fee').text('￥'+data.train_fee);//价格
		$('#class_name').text(data.class_name);
		$('#apply_time').text(timeWithStamp6(data.apply_start_time));//报名时间
		$('#train_time').text(timeWithStamp6(data.train_start_time)+'-'+timeWithStamp6(data.train_end_time));//培训时间
		$('#train_address').text(data.train_address);//培训地址
	}
	function courseCellHtml(data){
		return '<li studyId="'+data.course_info_id+'">'+
					'<h3>'+data.course_name+'</h3>'+
					'<div><span></span> <span class="direct-time">（'+data.course_period+'课时）</span></div>'+
				'</li>';
	}
	function backClick(){
		api.closeWin();
	}
	function commit() {
		var spare1=$(".support-cont .support-cell:eq(0)").hasClass("active")?"1":"2";
		var spare2=[];
        for(var index=0;$("#course_list").children().length>index;index++){
            var child=$("#course_list").children().eq(index);
            if(child.hasClass("active"))
                spare2.push(child.attr("studyId"));
        }
        spare2=spare2.toString();
        if(spare1==="1" && $.isEmptyObject(spare2)){
            toast("请选择学习方向");
            return;
        }
		var apply_school=$("#apply_school").val();
        if($.isEmptyObject(apply_school)){
            toast("请输入院校名称");
            return;
        }
        var apply_major=$("#apply_major").val();
        if($.isEmptyObject(apply_major)){
            toast("请输入专业名称");
            return;
        }
        var apply_name=$("#apply_name").val();
        if($.isEmptyObject(apply_name)){
            toast("请输入负责人名字");
            return;
        }
        var apply_contact_phone=$("#apply_contact_phone").val();
        if($.isEmptyObject(apply_contact_phone)){
            toast("请输入联系电话");
            return;
        }
        var spare7=$("#spare7").val();
        if($.isEmptyObject(spare7)){
            toast("请输入实训人数");
            return;
        }
        var spare8=$("#spare8").val();
        if($.isEmptyObject(spare8)){
            toast("请输入实训年级");
            return;
        }

        var spare3=$("#spare3").val();
        if($.isEmptyObject(spare3)){
            toast("请选择开始时间");
            return;
        }
        spare3 = timeStamp10WithString(spare3);
        var spare4=$("#spare4").val();
        if($.isEmptyObject(spare4)){
            toast("请选择结束时间");
            return;
        }
        spare4 = timeStamp10WithString(spare4);
		var radioValue = $("input[name='pay']:checked").val();
		if (radioValue === undefined) {
			api.toast({
				msg: '请选择支付方式'
			});
			return;
		}
		var currentParams={
			spare1:spare1,//服务需求
			spare2:spare2,//学习方向
			apply_school:apply_school,//院校名称
			apply_major:apply_major,//专业名称
			apply_name:apply_name,//负责人
			apply_contact_phone:apply_contact_phone,//联系电话
			spare7:spare7,//实训人数
			spare8:spare8,//实训年级
			spare3:spare3,//实训开始时间
			spare4:spare4,//实训结束时间
			apply_type_id:11,//10:长风班报名  11:实践教学报名
			apply_user_id:$api.getStorage("cfnetppuid"),//用户ID
			link_id:api.pageParam.id,//培训班ID
			pay_type:parseInt(radioValue)
		};
		// console.log(JSON.stringify(pargam));
		api.sendEvent({
			name: 'win_signup_train',
			extra: currentParams
		});
	}

</script>
</html>